<template>
  <div>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <Nav message="4" />

    <!-- <div class="o1">
      <div v-for="(item, index) in this.msg" :key="index">
        {{ item.msg }}
      </div>
    </div> -->

    <van-list>
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {
    Nav,
  },
  props: {},
  data() {
    //这里存数据
    return {
      msg: [],
      memberEmail: null,
      list:[]
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {},
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
this.list.push(1);
this.list.push(2);

    const _this = this;
    axios.get(this.$api + "member/getMemberInfo").then(function (resp) {
      if (resp.data.code == 0) {
        _this.memberEmail = resp.data.data;
      }

      //判断当前浏览器是否支持WebSocket
      if ("WebSocket" in window) {
        _this.websocket = new WebSocket(
          "ws://localhost:" + 9998 + "/ws/" + _this.memberEmail
          // "wss://www.mobilestore.link" + "/ws/" + _this.memberEmail
        );
      } else {
        alert("不支持建立socket连接");
      }
      //连接发生错误的回调方法
      _this.websocket.onerror = function () {
        console.log("连接发生错误的回调方法");
      };

      //连接成功建立的回调方法，java自动发送最近30条消息
      _this.websocket.onopen = function (event) {
        console.log("建立连接成功");
      };

      //接收到消息的回调方法
      _this.websocket.onmessage = function (event) {
        console.log(event.data);
        _this.msg.push({ msg: event.data });
      };
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style>
.o1 {
  /* margin:0 auto; */
  /* width:80%; */
  height: 30rem;
  /* border: 2px solid plum; */
}
</style>